import './Scss.scss'

import { useMount } from 'ahooks'
import { lazy, useState } from 'react'
import { LeftOutlined } from '@ant-design/icons'

import { GetIndexedDB } from '../../Utils/IndexedDB'


const A01 = ({ PageEvent }) => {
    const [LogoTemp, setLogoTemp] = useState()
    const [MenuTemp, setMenuTemp] = useState()
    const [HeadTemp, setHeadTemp] = useState()
    const [BodyTemp, setBodyTemp] = useState()

    const getStyleConfig = async () => {
        const { body, head, logo, menu } = await GetIndexedDB('theme')
        const Logo = lazy(() => import(`../Logo/${logo}.jsx`))
        const Menu = lazy(() => import(`../Menu/${menu}.jsx`))
        const Head = lazy(() => import(`../Head/${head}.jsx`))
        const Body = lazy(() => import(`../Body/${body}.jsx`))
        setLogoTemp(Logo)
        setMenuTemp(Menu)
        setHeadTemp(Head)
        setBodyTemp(Body)
    }
    const [collapsed, setCollapsed] = useState(false)
    const onSwitch = () => setCollapsed(e => !e)
    useMount(getStyleConfig)

    if (LogoTemp && MenuTemp && HeadTemp && BodyTemp) {
        return (
            <div className='ThemeTemp ThemeTempA01'>
                <div className='TempSwitch' style={{ left: collapsed ? 232 : 80, transform: `rotate(${collapsed ? 720 : 180}deg)` }} onClick={onSwitch}>
                    <LeftOutlined />
                </div>
                <div className='Left'>
                    <LogoTemp PageEvent={PageEvent} collapsed={collapsed} />
                    <MenuTemp PageEvent={PageEvent} collapsed={collapsed} />
                </div>
                <div className='Rigth'>
                    <HeadTemp PageEvent={PageEvent} />
                    <BodyTemp PageEvent={PageEvent} />
                </div>
            </div>
        )
    }


}

export default A01;